<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figma设计页面</title>
    <link rel="stylesheet" href="App.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <div class="top-nav">
            <div class="logo-section">
                <img src="assets/b56dd104-26a8-4df5-80e5-682a4b93f765.png" alt="Logo" class="logo" />
            </div>
            <div class="nav-icons">
                <img src="assets/0b6fe692-af36-475c-af15-38510353137e.png" alt="Icon 1" />
                <img src="assets/b32212f4-0e0f-47a4-94ef-204b86812bcf.png" alt="Icon 2" />
                <img src="assets/d7935b3a-5c50-42bd-92d3-25aad76a6ae5.png" alt="Icon 3" />
            </div>
        </div>

        <!-- 搜索栏 -->
        <div class="search-container">
            <div class="search-box">
                <img src="assets/9be23957-e392-4f01-bbaf-f5e1df2d438f.png" alt="Search icon" class="search-icon" />
                <span class="search-text">Search</span>
            </div>
        </div>

        <!-- 分类标签 -->
        <div class="category-tabs">
            <div class="tab active">
                <img src="assets/279bd80a-df4e-406c-848f-58157d5311e1.png" alt="Favorites" />
                <span>Favorites</span>
            </div>
            <div class="tab">
                <img src="assets/3cf3fcec-ed31-40e3-8307-27bf338350a5.png" alt="History" />
                <span>History</span>
            </div>
            <div class="tab">
                <img src="assets/e66b4b74-4a52-4c64-ba22-0e00cd945e0a.png" alt="Following" />
                <span>Following</span>
            </div>
            <div class="tab">
                <img src="assets/1343e8a7-502e-4700-873c-9b5341732387.png" alt="Orders" />
                <span>Orders</span>
            </div>
        </div>

        <!-- Banner区域 -->
        <div class="banner-section">
            <h1 class="banner-title">Banner title</h1>
            <div class="banner-indicators">
                <div class="indicator active"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
            </div>
        </div>

        <!-- 第一个产品区域 -->
        <div class="product-section">
            <div class="section-header">
                <h2 class="section-title">Title</h2>
                <div class="arrow-button">
                    <img src="assets/3e1eb712-026b-44e5-8ce7-c99b439d76c5.png" alt="Arrow" />
                </div>
            </div>
            <div class="product-grid">
                <div class="product-card">
                    <img src="assets/54c49764-1627-4006-b965-656f1a6dd8a8.png" alt="Product" />
                    <span class="product-title">Title</span>
                </div>
                <div class="product-card">
                    <img src="assets/c8054297-4234-42bc-9525-d287dd481aa7.png" alt="Product" />
                    <span class="product-title">Title</span>
                </div>
                <div class="product-card">
                    <img src="assets/fc8e4fa7-44d7-4354-88ec-bd412af75eda.png" alt="Product" />
                    <span class="product-title">Title</span>
                </div>
                <div class="product-card">
                    <img src="assets/3f059d62-b857-4ea8-8a40-98b7d2dc9534.png" alt="Product" />
                    <span class="product-title">Title</span>
                </div>
            </div>
        </div>

        <!-- 第二个产品区域 -->
        <div class="product-section">
            <div class="section-header">
                <h2 class="section-title">Title</h2>
                <div class="arrow-button">
                    <img src="assets/75c68334-a753-4831-9694-5f13f939c988.png" alt="Arrow" />
                </div>
            </div>
            <div class="product-grid-large">
                <div class="product-card-large">
                    <img src="assets/5f8cc04d-61d9-44e5-bbf9-9754766812cf.png" alt="Product" />
                    <div class="product-info">
                        <div class="brand">Brand</div>
                        <div class="product-name">Product name</div>
                        <div class="price">$10.99</div>
                    </div>
                </div>
                <div class="product-card-large">
                    <img src="assets/82f2ac42-ce41-41be-a8cf-ece72c635e2a.png" alt="Product" />
                    <div class="product-info">
                        <div class="brand">Brand</div>
                        <div class="product-name">Product name</div>
                        <div class="price">$10.99</div>
                    </div>
                </div>
                <div class="product-card-small">
                    <img src="assets/8618ea8c-7c6a-486d-8f5f-a3ffb9463d93.png" alt="Product" />
                    <div class="product-info">
                        <div class="brand">Brand</div>
                        <div class="product-name">Product name</div>
                        <div class="price">$10.99</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三个产品区域 -->
        <div class="product-section">
            <div class="section-header">
                <h2 class="section-title">Title</h2>
                <div class="arrow-button">
                    <img src="assets/3d126963-8d7a-4255-a7ef-224dad865f89.png" alt="Arrow" />
                </div>
            </div>
            <div class="product-grid-small">
                <img src="assets/ef7e223c-0449-4d7f-a7d3-0874de75831d.png" alt="Product" />
                <img src="assets/92a57971-efd7-4269-a288-b7751f637c52.png" alt="Product" />
                <img src="assets/daa90c90-23b0-4d25-b16f-c7dc33ef3d5b.png" alt="Product" />
                <img src="assets/214f6a82-0ef1-4816-be27-f04993e82335.png" alt="Product" />
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item">
                <img src="assets/715b5195-0975-4425-8976-a1609462ce88.png" alt="Home" />
            </div>
            <div class="nav-item">
                <img src="assets/67219259-32a2-4818-a392-a59d74d5e029.png" alt="Search" />
            </div>
            <div class="nav-item">
                <img src="assets/37dc1302-fbb3-409b-8214-3fb93ad1b2d5.png" alt="Favorites" />
            </div>
            <div class="nav-item">
                <img src="assets/7dc5bf87-0ee3-4fc2-9df9-3d1b8bbd9a7f.png" alt="Profile" />
            </div>
            <div class="nav-item">
                <img src="assets/edf8384d-4cd2-4e33-a877-156f6f0185a3.png" alt="More" />
            </div>
            <div class="nav-indicator"></div>
        </div>
    </div>

    <script>
        // 添加交互功能
        document.addEventListener('DOMContentLoaded', function() {
            // 分类标签切换
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 产品卡片点击效果
            const productCards = document.querySelectorAll('.product-card, .product-card-large, .product-card-small');
            productCards.forEach(card => {
                card.addEventListener('click', function() {
                    console.log('Product clicked:', this.querySelector('img').alt);
                });
            });

            // 搜索框交互
            const searchBox = document.querySelector('.search-box');
            searchBox.addEventListener('click', function() {
                this.style.border = '2px solid #007AFF';
            });

            // 箭头按钮点击
            const arrowButtons = document.querySelectorAll('.arrow-button');
            arrowButtons.forEach(button => {
                button.addEventListener('click', function() {
                    console.log('Arrow clicked');
                });
            });
        });
    </script>
</body>
</html>
